<!--
 * @Author: Bing
 * @Date: 2024-02-08 17:14:25
 * @LastEditors: Bing
 * @LastEditTime: 2024-02-11 15:30:45
 * @Description: file content
 * @FilePath: \mi365plus\src\pages\mySetting\mySetting.vue
-->
<script setup lang="ts">
import { ref } from 'vue';
import Top from '@/components/Top/Top.vue';
import { onShow } from '@dcloudio/uni-app';
import { useMemberStore } from '@/stores/modules/member';
import { requestLonging } from '@/services/user';
import { getImgToken } from '@/services/review';
import { onMounted } from 'vue';
onMounted(() => {
  // 小程序分享函数
  // #ifdef MP-WEIXIN
  uni.showShareMenu<{
    withShareTicket: true;
    menus: ('shareAppMessage' | 'shareTimeline')[];
  }>({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
  });
  // #endif
});
// 登录按钮名称变化
const loginButtonName = ref('登录');
const name = ref('未登录');
// 登录
const login = async () => {
  // 登录逻辑
  if (loginButtonName.value === '退出登录') {
    useMemberStore().clearProfile();
    loginButtonName.value = '登录';
    name.value = '未登录';
    uni.showToast({ title: '退出登录成功！', icon: 'none' });
  } else {
    uni.showLoading({
      title: '登陆中...',
    });

    const res = await requestLonging();
    if (res?.code === '0') {
      // 存储用户信息
      useMemberStore().setProfile(res.data);
      // 获取七牛云token
      const imgToken = (await getImgToken()).data.token;
      if (imgToken) {
        useMemberStore().setProfile({
          ...res.data,
          imgToken,
        });
      }
      loginButtonName.value = '退出登录';
      name.value = res.data.username;
      uni.hideLoading();
      uni.showToast({
        title: '登录成功！',
        icon: 'success',
      });
      return;
    } else {
      // 提示登录错误信息
      uni.showToast({ title: res?.msg, icon: 'error' });
      return;
    }
  }
};

onShow(() => {
  if (useMemberStore().profile?.username) {
    const profile = useMemberStore().getProfile();
    name.value = profile!.username;
    loginButtonName.value = '退出登录';
  } else {
    useMemberStore().clearProfile();
    loginButtonName.value = '登录';
    name.value = '未登录';
  }
});
</script>
<template>
  <Top />
  <view class="boder">
    <image
      class="userImage"
      src="@/static/images/chief厨师.png"
      mode="scaleToFill"
    >
    </image>
    <text class="title">您好：{{ name }}</text>
    <view class="itemList">
      <navigator
        url="/pages/eidSetting/eidSetting"
        open-type="navigate"
        hover-class="navigator-hover"
      >
        <button size="default" type="primary">EID设置</button>
      </navigator>
    </view>
    <button class="singOut" size="default" type="primary" @tap="login">
      {{ loginButtonName }}
    </button>
  </view>
</template>

<style lang="scss" scoped>
.top {
  height: 230rpx;
  position: relative;
  .background {
    background-color: #5199ff;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: absolute;
    height: 180rpx;
    width: 100%;
  }
}
.boder {
  position: relative;
  width: 90%;
  height: calc(80vh - var(--window-bottom));
  border: solid 1px #dcdcdc;
  box-shadow: 0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
  margin: 0 auto;
  .userImage {
    position: absolute;
    top: -16.5625vw;
    left: 10%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid 1px #dcdcdc;
  }
  .title {
    position: absolute;
    top: 14.4375vw;
    left: 10%;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
  }
  .itemList {
    position: relative;
    margin-top: 35%;
    button {
      width: 90%;
      margin: 0 auto;
      background-color: #5199ff;
      border-radius: 10px;
    }
  }
  .singOut {
    position: absolute;
    left: 20%;
    width: 60%;
    bottom: 10%;
    border-radius: 10px;
    background-color: #5199ff;
  }
}
</style>
